<template>
  <div class="block text-center">
    <el-carousel :interval="3000"  height="100%" :pause-on-hover="false">
      <el-carousel-item v-for="item in carouselData" :key="item.url"  >
        <el-image class="carousel-image" :src="item.url" alt="" :fit="'cover'"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const carouselData = ref([
      {url: new URL("@/assets/images/www1.jpg", import.meta.url).href, dest: "https://chatglm.cn/main/alltoolsdetail" },
	  {url: new URL("@/assets/images/www2.jpg",import.meta.url).href,dest:"https://chatglm.cn/main/alltoolsdetail"},
	  {url: new URL("@/assets/images/www3.jpg",import.meta.url).href,dest:"https://chatglm.cn/main/alltoolsdetail"},
	  {url: new URL("@/assets/images/www4.jpg",import.meta.url).href,dest:"https://chatglm.cn/main/alltoolsdetail"},
	 
    ]);

    function jumpto(destination) {
      window.location.href = destination;
    }

    return { carouselData, jumpto };
  }
}
</script>

<style scoped>
.el-carousel {
	margin-top:10px;
  width: 100%; /* 轮播图容器的宽度 */
  height: 73vh; /* 轮播图容器的高度 */
}

.el-carousel__item {
  width: 100%; /* 轮播图项的宽度 */
  height: 100%; /* 轮播图项的高度 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐图片 */
  justify-content: center; /* 水平居中对齐图片 */
  overflow: hidden; /* 防止图片溢出容器 */
}

.carousel-image {
  width: 100%; /* 图片宽度 */
  height: 100%; /* 图片高度 */
  object-fit: cover; /* 覆盖整个容器，保持宽高比，裁剪多余部分 */
   object-position: 50% 50%;
  border: 4px solid #fff; /* 图片边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 图片阴影 */
}
</style>



